<script setup>
import { ref } from "vue"; //

const props = defineProps(["searchVal"]);
const emits = defineEmits(["update:searchVal", "update:showResult"]);

const show = ref(false);

const onInp = (e) => {
  emits("update:searchVal", e.target.value.trim());
  emits("update:showResult", true);
};
const cancel = () => {
  show.value = false;
  emits("update:searchVal", "");
  emits("update:showResult", false);
};
</script>

<template>
  <div class="search">
    <div class="inpBox">
      <i>&#x2315;</i>
      <input
        :value="searchVal"
        @input="onInp"
        @focus="show = true"
        name="city"
        placeholder="输入城市名或拼音"
      />
      <em v-show="searchVal" @click="emits('update:searchVal', '')">&times;</em>
    </div>
    <span v-show="show" @click="cancel">取消</span>
  </div>
</template>

<style lang="scss" scoped>
.search {
  height: 0.49rem;
  padding: 0.095rem 0.15rem;
  display: flex;

  .inpBox {
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    flex: 1;
    border-radius: 0.04rem;
    position: relative;
  }
}

i {
  width: 0.3rem;
  height: 0.21rem;
  font-size: 0.28rem;
  transform: rotateY(180deg) translateY(-0.12rem);
  margin-right: 0.06rem;
  color: var(--cl-wh);
}

input {
  border: none;
  outline: none;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  font-size: 0.14rem;

  &::placeholder {
    font-size: 0.12rem;
    color: #aaa;
  }
}

span {
  background: #f4f4f4;
  height: 0.3rem;
  line-height: 0.3rem;
  padding-left: 0.1rem;
  color: #444;
}

em {
  position: absolute;
  font-size: 0.14rem;
  top: 50%;
  transform: translateY(-50%);
  right: 0.1rem;
  color: #eee;
  background: #999;
  width: 0.14rem;
  height: 0.14rem;
  border-radius: 50%;
  line-height: 0.11rem;
  text-align: center;
}
</style>
